<template>
  <div class='main'>
    <a-form-model ref='loginForm' :model='loginForm' class='user-layout-login'>
      <a-form-model-item prop='username' :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
        <a-input v-model='loginForm.username' size='large' type='text' placeholder='账号'>
          <a-icon slot='prefix' type='user' :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop='password' :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
        <a-input
          v-model='loginForm.password'
          size='large'
          type='password'
          placeholder='密码'
          @keyup.enter.native='handleSubmit'
        >
          <a-icon slot='prefix' type='lock' :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button size='large' type='primary' class='login-button' :loading='loading' @click='handleSubmit'>
          登录
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { login } from '@/api/login'
import { timeFix } from '@/utils/util'
import { ACCESS_TOKEN, ADMIN_INFO } from '@/store/mutation-types'
import storage from 'store'
import store from '@/store'
import md5 from 'md5'

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  created() {
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const loginForm = Object.assign({}, this.loginForm)
          // loginForm.password = md5(this.loginForm.password)
          login(loginForm)
            .then(res => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    loginSuccess(res) {
      storage.set(ACCESS_TOKEN, res.data.token, res.data.ttl)
      store.commit('SET_TOKEN', res.data.token)
      store.commit('SET_INFO', res.data.admin)
      storage.set(ADMIN_INFO, res.data.admin)
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: `欢迎`,
          description: `${timeFix()}，欢迎回来`
        })
      }, 500)
    },
    requestFailed(err) {
      console.log(err)
    }
  }
}
</script>

<style lang='less' scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }
  
  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
  
  .forge-password {
    font-size: 14px;
  }
  
  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }
  
  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;
    
    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;
      
      &:hover {
        color: #1890ff;
      }
    }
    
    .register {
      float: right;
    }
  }
}
</style>
